<template>
  <a-spin :spinning="loading">
    <div>
      <a-form-model
        class="fromModels"
        :model="config"
        ref="fristquickpayModel"
        layout="vertical"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 8, offset: 1 }"
      >
        <a-form-model-item label="快捷首刷开关">
          <a-radio-group v-model="status">
            <a-radio :value="1"> 开 </a-radio>
            <a-radio :value="0"> 关 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="达标金额">
          <a-input v-model="config.money">
            <div slot="addonAfter">元</div>
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="达标限制天数">
          <a-select v-model="config.day">
            <a-select-option v-for="(item, index) in dayNums" :key="index" :value="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="税费费率">
          <a-input v-model="config.tax_rate">
            <div slot="addonAfter">万</div>
          </a-input>
        </a-form-model-item>
        <a-form-model-item
          v-for="(item, index) in config.collection"
          :prop="'collection.' + index"
          :key="index"
          :label="index + '级返佣金额'"
          :rules="[{ required: true, message: '请输入' + index + '级返佣金额', trigger: 'blur' }]"
        >
          <a-input v-model="config.collection[index]" placeholder="请输入">
            <div slot="addonAfter">元</div>
          </a-input>
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{ span: 8, offset: 8 }">
          <a-button type="primary" @click="lineChanges('collection', 'add')">新增一行</a-button>
          <a-button type="primary" @click="lineChanges('collection', 'del')">删除最后一行</a-button>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="whites">提交</a-button>
          <a-button type="primary" @click="getPrivacyAgreementInfo">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-spin>
</template>

<script>
import { getRebateApi, setRebateApi } from '@/api/return.js'
export default {
  name: 'fristquickpay',

  data() {
    return {
      loading: false,
      dayNums: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      config: {
        collection: [],
        day: '',
        money: '0',
        tax_rate: '0'
      },
      status: 1
    }
  },
  created() {
    this.getPrivacyAgreementInfo()
  },
  methods: {
    lineChanges(key, type) {
      if (type == 'add') {
        this.config[key].push('')
      }
      if (type == 'del') {
        this.config[key].splice(this.config[key].length - 1, 1)
      }
    },
    getPrivacyAgreementInfo() {
      this.loading = true
      getRebateApi({
        brand_id: process.env.VUE_APP_BRAND_ID,
        type: 'first_quick_pay_rebate'
      })
        .then(res => {
          this.config = res.data.config
          this.status = res.data.status
        })
        .finally(() => {
          this.loading = false
        })
    },
    whites() {
      this.$refs.fristquickpayModel.validate(async valid => {
        if (!valid) return
        const send = {
          type: 'first_quick_pay_rebate',
          brand_id: process.env.VUE_APP_BRAND_ID,
          status: this.status,
          data: this.config
        }
        try {
          await setRebateApi(send)
          this.getPrivacyAgreementInfo()
          this.$message.success('操作成功')
        } catch (error) {
          this.$message.error(error.data.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
